<template>
	<div class="index flex gap-x-2 items-center justify-between">
		<div
			v-for="tab in tabs"
			:key="tab.value"
			class="tab flex-1"
			:class="{ active: nowTab.value === tab.value }"
			@click="handleClick(tab)"
		>
			<p class="mb-1">{{ tab.label }}</p>
			<p>{{ tab.count || 0 }}</p>
		</div>
	</div>
</template>

<script setup lang="ts">
const props = defineProps<{
	tabs: {
		label: string;
		value: string;
		count: number;
	}[];
}>();

const emits = defineEmits(['click']);
const nowTab = ref(props.tabs[0]);
const handleClick = (tab: any) => {
	nowTab.value = tab;
	emits('click', tab);
};
</script>

<style lang="scss" scoped>
.tab {
	padding: 4px 8px;
	font-size: 16px;
	text-align: center;
	border-radius: 4px;
	background: #e7f3ff;
	cursor: pointer;
	&.active {
		color: #fff;
		background: #1890ff;
	}
}
</style>
